var PersonCapacityTable = function () {
  var template = /* html */ `
    <div class="person-capacity-table">
      <table ref="capacityTable" cellspacing="0" cellpadding="0" :key="tableKey">
        <thead>
          <tr>
            <th style="min-width:100px">部门</th>
            <th style="min-width:100px">车间</th>
            <th style="min-width:100px">姓名</th>
            <th style="min-width:140px">工序</th>
            <th style="min-width:100px">产能合计</th>
            <th style="min-width:100px">计件汇总</th>
            <th style="min-width:70px">报工方式</th>

            <template v-for="date in dateList">
              <th :key="date" style="min-width:60px">
                {{moment(date).get('date')}}
              </th>
            </template>
          </tr>
        </thead>
        <tbody ref="tableBoay">
          <tr v-for="(capacity,index) in capacityList" :key="'capacity_'+capacity.id" :class="{'odd':capacity.rowIndex%2!==0}">
            <td>{{capacity.deptName}}</td>
            <td>{{capacity.workShopName}}</td>
            <td class="is-center">{{capacity.userName}}</td>
            <td>{{capacity.processName}}</td>
            <td class="is-center no-warp">{{capacity.sumCapacity}}</td>
            <td class="is-center no-warp">{{capacity.sumPrice}}</td>
            <td class="is-center no-warp">{{reportTypeObj[capacity.type]}}</td>

            <template v-for="date in dateList">
              <td :key="date" class="is-center no-warp">
                {{getCapacityValue(capacity,date)}}
              </td>
            </template>
          </tr>
        </tbody>
      </table>
    </div>
  `;

  return {
    mixins: [boardRunningMixin],

    props: {
      capacityData: {
        type: Object,
        required: true
      }
    },

    watch: {
      changeData: function () {
        this.clearTimeoutList();
        var capacityData = this.capacityData;
        var capacityList = this.getCapacityList();
        this.capacityList = capacityList;
        this.dateList = this.getDateList();
        var rowIndex = capacityData.rowIndex;
        if (rowIndex >= capacityList.length) {
          this.runIndex = 0;
        }
        this.tableKey = SysUtil.getId();

        this.boardRunning();
      }
    },

    computed: {
      changeData: function () {
        var capacityData = this.capacityData;
        return {
          searchCapacityList: capacityData.searchCapacityList
        };
      }
    },

    data: function () {
      return {
        capacityList: this.getCapacityList(),
        dateList: this.getDateList(),
        reportTypeObj: PersonCapacityInfoSearch.typeObj,
        tableKey: SysUtil.getId(),
        runIndex: 0,
        moment: moment
      };
    },

    mounted: function () {
      this.boardRunning();

      var self = this;
      $(this.$el).resize(function () {
        self.clearTimeoutList();
        var canRowMove = self.checkRowMove();
        if (!canRowMove) {
          self.capacityData.rowIndex = 0;
          self.capacityList = self.getCapacityList();
        }

        var canColMove = self.checkColMove();
        if (!canColMove) {
          self.capacityData.colIndex = 0;
          self.dateList = self.getDateList();
        }

        if (!canRowMove || !canColMove) {
          self.tableKey = SysUtil.getId();
          self.runIndex = 0;
        }
        self.boardRunning();
      });
    },

    methods: {
      getCapacityList: function () {
        var capacityData = this.capacityData;
        var capacityList = capacityData.getCapacityList();
        return capacityList;
      },

      getDateList: function () {
        var capacityData = this.capacityData;
        var dateList = capacityData.getDateList();
        return dateList;
      },

      getCapacityValue: function (capacity, date) {
        var detailObj = capacity.detailObj;
        return detailObj[date].capacity;
      },

      boardRunning: function () {
        this.clearTimeoutList();

        this.tableRunning();
      },

      tableRunning: function () {
        var self = this;
        var timeout = setTimeout(function () {
          var runIndex = self.runIndex;
          if (runIndex % 2 === 0) {
            if (self.checkRowMove()) {
              self.toRowMove();
            }
          } else {
            if (self.checkColMove()) {
              self.toColMove();
            }
          }
          self.runIndex = (runIndex + 1) % 2;
          self.timeoutList[0] = null;
          self.tableRunning();
        }, 5000);
        this.timeoutList[0] = timeout;
      },

      checkRowMove: function () {
        var capacityTable = this.$refs['capacityTable'];
        if (capacityTable === undefined) {
          return false;
        }

        var totalHeight = $(this.$el).height();
        var tableHeight = $(capacityTable).height();
        return totalHeight < tableHeight;
      },

      toRowMove: function () {
        this.capacityData.incrementRowIndex();
        var $tableBoay = $(this.$refs['tableBoay']);
        var $tr = $tableBoay.find('tr');
        $tableBoay.append($tr[0]);
      },

      checkColMove: function () {
        var capacityTable = this.$refs['capacityTable'];
        if (capacityTable === undefined) {
          return false;
        }

        var totalWidth = $(this.$el).width();
        var tableWidth = $(capacityTable).width();
        return totalWidth < tableWidth;
      },

      toColMove: function () {
        this.capacityData.incrementColIndex();
        var $capacityTable = $(this.$refs['capacityTable']);
        var $tr = $capacityTable.find('tr');
        for (var i = 0; i < $tr.length; i++) {
          var $row = $($tr[i]);
          var $col = $row.find('td,th');
          $row.append($col[7]);
        }
      }
    },

    template: template
  };
}();
